<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://unpkg.com/vue"></script>
    <script type="text/x-template" id="mycomp"></script>
    <span><div>总共{{total}}个事项,已勾选{{done}}个事项，未勾选{{total-done}} 个事项</div></span>
    <script>
        window.onload=function(){
            Vue.component('todoWord', {
                props: ['total','done'],
                template:'mycomp',
                template:'<span>总共{{total}}个事项,已勾选{{done}}个事项，未勾选{{total-done}} 个事项</span>'
            })
            var app=new Vue({
                el: '#app',
                data: {
                    text:'',
                    message:'',
                    items: [
                        { text: '吃饭',done:false},
                        { text: '睡觉',done:false},
                        { text: '哈哈哈',done:true}
                    ]
                },computed:{
                    done:function(){
                        var num=0;
                        for(var i=0;i<this.items.length;i++){
                            if(this.items[i].done){
                                num++;
                            }
                        }
                        return num;
                    }
                },
                methods: {
                    add:function(){
                        var s={text:this.text,done:false}
                        this.items.push(s)
                    },
                    swit:function(index){
                        this.items[index].done=!this.items[index].done;
                    },
                }

            })
        }
    </script>
    <style>.del{  text-decoration: line-through;}</style>
</head>
<body>
<div id="app">
    <h4>Todo List</h4>
    <input v-model="text" v-on:keyup.enter="add">
    <button v-on:click="add">添加</button>
    <div v-for="(item,index) in items">
        <input type="checkbox" v-bind:checked="item.done" v-on:click="swit(index)">{{index}}.
        <span v-bind:class="{del:item.done}">{{item.text}}</span>
    </div>
    <todo-word :total="items.length";done="done"></todo-word>
</div>
</body>
</html>